<template>
    <view class="goods-box">
        <view v-for="(item,index) in dataList" :key="index" class="goods-item" @tap="toGoodsInfo(item)">
            <view class="goods-img">
                <image class="image" :src="item.images.split(',')[0]" mode="aspectFit"/>
            </view>
            <view class="goods-content">
                <view class="price">
                    <text>价格：</text>
                    <text class="price-money">¥{{ item.price }}</text>
                </view>
                <view>{{ item.goods_name }}</view>
            </view>
        </view>
    </view>
</template>
<script setup>
const props = defineProps({
    dataList: {
        type: Array,
        default: []
    }
})

const toGoodsInfo=(item) => {
    qly.page.open('/pages/home/goods/detail', {id: item.id})
}
</script>
<style scoped lang="scss">
.goods-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12rpx;
    
    .goods-item {
        background: #fff;
        
        .goods-img {
            width: 100%;
            height: 300rpx;
            
            .image {
                width: 100%;
                height: 100%;
            }
        }
    }
    
    .goods-content {
        padding: 12rpx 24rpx;
        box-sizing: border-box;
        
        .price {
            .price-money {
                color: red;
            }
        }
    }
}
</style>
